<template>
  <!--  面包屑导航-->
  <div class="break">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>人事管理</el-breadcrumb-item>
      <el-breadcrumb-item>上岗管理</el-breadcrumb-item>
      <el-breadcrumb-item><b>门卡配置</b></el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <!-- 搜索工具栏-->
<!--  <div style="margin:40px 20px 20px 20px">
    <el-form :inline="true" ref="searchFormRef" :model="searchFormModel" class="demo-form-inline" style="margin-top: 20px">
      <el-form-item label="节日名称" prop="holiday_name">
        <el-input v-model="searchFormModel.holiday_name" placeholder="请输入节日" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="searchOnSubmit">查询</el-button>
        <el-button style="background-color: pink" @click="dialogAddState=true">添加</el-button>
      </el-form-item>
    </el-form>
  </div>-->
  <!--  数据表格-->
  <div style="margin:20px">
    <el-table :data="blogInfo" stripe border style="width: 100%"
    >
      <el-table-column prop="access_card_number" label="门禁卡号" />
      <el-table-column prop="access_status" label="门禁是否连接"  />
      <el-table-column prop="attendanc_card_number" label="出勤机卡号" />
      <el-table-column prop="attendanc_status" label="出勤机是否连接" />
      <el-table-column prop="specia_channel_card_number" label="特殊通道卡号" />
      <el-table-column prop="employee_access_status" label="员工通道是否连接" />
      <el-table-column prop="onetimecard" label="首次绑卡时间" />
    </el-table>
  </div>
  <!--  分页-->
  <div class="page">
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[3,5]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="sizes, prev, pager, next"
        :total="totals"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import {Unlock,Lock,Delete,Edit} from "@element-plus/icons";
import {onMounted, reactive, ref} from "vue";
import request from "@/utils/people";
import {ElMessage, ElMessageBox} from "element-plus";
const  mallInfo=ref([])
onMounted(()=>{
  getCards();
})

//分页
const currentPage = ref(1)
const pageSize = ref(3)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
let totals=ref(0);

const  blogInfo=ref([])
// 表格显示内容
const getCards = () => {
  const params = {
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    // 初始时不包含ID参数
  };
  request({
    url: '/cards/canAll',
    method: 'get',
    params,
  }).then((req) => {
    console.log(req)
    if (200 == req.data.errorCode) {
      blogInfo.value = req.data.data.records.map(item => ({
        ...item,
      }));
      totals.value = req.data.data.total;
    }
  })
}
const searchOnSubmit=()=>{
  getCards()
}
</script>

<style scoped>
.page{
  margin-left: 40%;
}
.el-breadcrumb{
  font-size: 18px;
}
.break{
  margin: 5px 0 0 10px;
}
</style>